<style>
.heading{
    color: red;
    font-size: 18px;
    padding: 10px;
    margin: 10px;
    border: red solid 1px;
    border-radius: 5px;
}
.heading a{
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}
.project-lists{
    padding: 0 10px;
}
.project-item{
    height: 104px;
    padding: 10px 0;
    overflow: hidden;
    border-bottom: #ccc solid 1px;
}
.project-item:first-child{
    border-top: #ccc solid 1px;
}
.product-item *{
    overflow: hidden;
}
.project-item-left{
    width: 84px;
    height: 84px;
    float: left;
}
.project-item-content{
    height: 84px;
    margin-left: 94px;
}
.project-title{
    height: 24px;
    line-height: 24px;
}
.project-desc{
    height: 40px;
    overflow: hidden;
    color: #999;
}
.project-meta{
    height: 20px;
    overflow: hidden;
}
.project-meta span {
    color: red;
    font-weight: bold;
}
.none-lists{
    text-align: center;
    padding: 30px;
}
</style>

<!-- TOPBAR -->
<header class="top-bar flex-row">
  <span class="row-item row-item-auto top-bar-back" onclick="window.history.back()">返回</span>
  <h3 class="row-item top-bar-name">公益捐赠项目</h3>
  <a class="row-item row-item-auto top-bar-menu" href="{$config.url}">主页</a>
</header>

<include file="headerBar"/>

<div class="heading">
    购买本商城参与公益捐赠的商品即可为相关公益项目捐赠。
    快点购买公益商品，奉献您的爱心吧！
    <p><a href="{$config.url}">现在购买商品献爱心</a></p>
</div>

<!-- 列表 -->
<div class="project-lists">
    <empty name="itemLists">
        <p class="none-lists">还没有公益项目</p>
    </empty>
    <volist name="itemLists" id="vo">
        <div class="project-item">
            <div class="project-item-left"><img src="{$vo.image}" /></div>
            <div class="project-item-content">
                <h4 class="project-title">{$vo.name}</h4>
                <p class="project-desc">{$vo.desc}</p>
                <h6 class="project-meta">共募集捐赠资金 <span>{$vo.donateSum}</span> 元</h6>
            </div>
        </div>
    </volist>
</div>